<template>
	<cover-view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
		<cover-view class="cont">
			<cover-view class="tabbar-item"
				v-for="(item, index) in list" 
				:key="index" 
				@click="tabbarChange(item.pagePath)"
			>
				<cover-image class="item-img" :src="item.selectedIconPath" v-if="current == index"></cover-image>
				<cover-image class="item-img" :src="item.iconPath" v-else></cover-image>
				<cover-view class="item-name" :class="{'tabbarActive': current == index}" v-if="item.text">{{item.text}}</cover-view>
			</cover-view>
		</cover-view>
	</cover-view>
</template>

<script>
	export default {
		props: {
		    current: ''
		},
		name:"Tabbar",
		data() {
			return {
				paddingBottomHeight: 0,  //苹果X以上手机底部适配高度
				list: [{
						text: '首页',
						iconPath: '/static/footIcon/home.png',  //未选中图标
						selectedIconPath: '/static/footIcon/home_active.png',  //选中图片
						pagePath: "/pages/home/home",  //页面路径
					},
					// {
					// 	text: '附近',
					// 	iconPath: '/static/footIcon/addr.png',
					// 	selectedIconPath: '/static/footIcon/addr_active.png',
					// 	pagePath: "/pages/map/list",
					// },
					{
						text: '订单',
						iconPath: '/static/footIcon/order.png',
						selectedIconPath: '/static/footIcon/order_active.png',
						pagePath: '/pages/pageOrder/orderList',
					},
					// {
					// 	text: '买家秀',
					// 	iconPath: '/static/footIcon/buyer.png',
					// 	selectedIconPath: '/static/footIcon/buyer_active.png',
					// 	pagePath: '/pages/buyer/list',
					// },
					{
						text: '我的',
						iconPath: '/static/footIcon/my.png',
						selectedIconPath: '/static/footIcon/my_active.png',
						pagePath: "/pages/my/mySelf",
					}
				]
			};
		},
		created() {
			let that = this;
			uni.getSystemInfo({
			    success: function (res) {
			        let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
			        model.forEach(item => {
			            //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
			            if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
			                that.paddingBottomHeight = 40;
			            }
			        })
			    }
			});
		},
		methods:{
			tabbarChange(path) {
			    uni.switchTab({
			        url: path
			    })
			}
		}
	}
</script>

<style lang="less">
.tabbarActive{
	color: #fff !important;
}
.tabbar{
	position: fixed;
	bottom: 36rpx;
	left: 0;
	right: 0;
	width: 100%;
	height: 120rpx;
	z-index: 9;
	.cont{
		width: 90%;
		height: 120rpx;
		border-radius: 63rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #E4919D;
		margin: 0 auto;
	}
	.tabbar-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 120rpx;
		.item-img{
			width: 44rpx;
			height: 44rpx;
		}
		.item-name{
			color: rgba(255,255,255,0.5);
			font-size: 20rpx;
			margin-top: 8rpx;
		}
	}
}
</style>